
<template>
  <div>
    <h2>表格</h2>
    <!-- data: 用来指定数据源，数组 -->

    <el-table :data="companys">
      <el-table-column label="公司名" prop="companyName"></el-table-column>

      <el-table-column label="logo">
        <!-- <template slot-scope="scope"> -->
        <template v-slot="scope">
          <!-- {{scope.row.companyLogo}} -->
          <img :src="scope.row.companyLogo" />
        </template>
      </el-table-column>

    </el-table>
    <el-table
      :data="tableData"
      style="width: 100%">
      <!-- prop：决定这一列数据的来源--数组中对象的属性名
      label: 指定表头的名字
      width: 最好留一列width不要写。它会自适应！！ -->
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>


      <el-table-column
        prop="date"
        label="日期-时间"
        width="180">
      </el-table-column>


      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>


      <el-table-column
        label="性别">
        <!-- 
          1. slot-scope是固定写法。作用是用来接收从 el-table-column内部传递出来的数据
          2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
          传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
          3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
          -->
        <template slot-scope="scope">
          {{showGender(scope.row.gender)}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <el-button type="danger">删除</el-button>
       
      </el-table-column>


      
    
      </el-table>
  </div>

</template>

  <script>
    export default {
      data() {
        return {
          companys:[{
            companyName: '小米',
            companyLogo: "http://s02.mifile.cn/assets/static/image/logo-mi2.png"
          }, 
          {
              companyName: '京东',
              companyLogo:"https://misc.360buyimg.com/lib/img/e/logo-201305-b.png"
            }, 
            {
              companyName: '百度',
              companyLogo:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
            }
          ],
          tableData: [
            {
              date: '2016-05-02',
              name: '王小花',
              address: '上海市普陀区金沙江路 1518 弄',
              gender: 0 // 性别
            }, 
            {
              date: '2016-05-04',
              name: '大黄',
              address: '上海市普陀区金沙江路 1517 弄',
              gender: 1
            }
          ]
        }
      },
      methods: {
        showGender(gender) {
          console.log('showGender', gender)
          if(gender === 1) {
            return '男'
          } else {
            return '女'
          }
        }
      },
      // created () {
      //   setTimeout(() => {
      //     // doajax....
      //     const res = [{
      //         date: '2016-05-02',
      //         name: '王小花',
      //         address: '上海市普陀区金沙江路 1518 弄',
      //         gender: 0 // 性别
      //       }, 
      //       {
      //         date: '2016-05-04',
      //         name: '大黄',
      //         address: '上海市普陀区金沙江路 1517 弄',
      //         gender: 1
      //       }]

      //     this.tableData = res
      //   }, 1000)
      // }
    }
  </script>